<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptionos">
            <swiper-slide v-for="(item,index) in imgList" :key="index">
                <img :src="item.image" alt="" width="100%">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

        <!-- 图片按钮 -->
        <ul class="list">
            <li @click="changeSwiper(index)" v-for="(item,index) in arr" 
            :key="index" :class="{active:index===num}">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    import api from '../../api/index'

    export default {
        name: 'VueSwiper',
        data() {
            let that = this;
            return {
                num: 0,
                arr: ["新增隐私/新闻确诊","现存确诊/现存疑似","死亡/治愈","病死率","治愈率"],
                imgList: [],

                swiperOptionos: {
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    // 循环(页面上在前面补上一个slider,后面补上一个slider)
                    loop: true,
                    on:{
                        slideChangeTransitionStart: function () {
                            if(this.activeIndex == that.arr.length+1){
                                that.num =0;
                            }else{
                                that.num = this.activeIndex-1;
                            }
                        },
                    }
                },

            }
        },

        computed: {
            // 获取swiper实例对象
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },

        async mounted() {
            const res = await api.getSwiperBanner()
            if(res.data.status === 200) {
                this.imgList = res.data.result;
            }else {
                console.log('接口错误')
            }
        },

        methods: {
            changeSwiper(index) {
                //高亮选中
                this.num = index;
                //让swiper切换
                this.swiper.slideTo(index + 1, 1000, false);
            },
        }
    }
</script>

<style scoped lang="less">
    .list {
        display: flex;
        li {
            flex: 1;
            padding: 0.1rem;
            font-size: 0.24rem;
            line-height: 0.32rem;
            margin: 0.1rem;
            background: #eee;
            color: #666;
            text-align: center;
            display: flex;
            align-items: center;
        }
        .active {
            background-color: rgb(80,116,173);
            color: #fff;
        }
    }
    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal >
    .swiper-pagination-bullets {
        display: none;
    }
</style>
